<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-11 16:29:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-11 17:13:25
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .outer {
            width:500px;
            height: 500px;
            background-color: skyblue;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto;

        }

        .center {
            width:300px;
            height: 300px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto;

        }

        .inner {
            width:100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 0;
            left: 600px;
            right: 0;
            bottom: 0;
            margin: 0 auto;

        }
        p{
            width:100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 600px;
            top: 500px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="center">
            <div class="inner"></div>
        </div>
    </div>

    <p></p>

     <script>
        //事件传播
        // 当行为发生以后,会按照父级结构往上转直到window
     
        // 捕获 从window往下走 直到 目标元素 
        // 目标 准确触发事件的元素  
        // 冒泡  事件目标到window的过程  
        


        // document.querySelector('.inner').addEventListener('click',function(){
        //     console.log('inner')
        // })

        // document.querySelector('.center').addEventListener('click',function(){
        //     console.log('center')
        // })

        // document.querySelector('.outer').addEventListener('click',function(){
        //     console.log('outer')
        // })

        // document.body.addEventListener('click',function(){
        //     console.log('body')
        // })

        // document.documentElement.addEventListener('click',function(){
        //     console.log('html')
        // })
        // document.addEventListener('click',function(){
        //     console.log('document')
        // })

        // window.addEventListener('click',function(){
        //     console.log('window')
        // })


        // 从目标到window 的过程就是时间冒泡


        // 阻止事件冒泡 的方法 

        // w3c浏览器 
        // 事件对象.stopPropagation()

        // ie
        // //事件对象.cancelBubble = true;
        // var pele = document.querySelector('p');
        
     document.querySelector('.inner').addEventListener('click',function(e){
        console.log('inner');
            e.stopPropagation();
         console.log(window.getComputedStyle(pele).backgroundColor)
         })

     document.querySelector('.center').addEventListener('click',function(e){
            e.stopPropagation();
                  console.log('center')
         })

        document.querySelector('.outer').addEventListener('click',function(e){
            e.stopPropagation();
                 console.log('outer')
        })

        // document.body.addEventListener('click',function(e){
        //     console.log('body')
        // })

        document.documentElement.addEventListener('click',function(e){
            e.stopPropagation();
                 console.log('html')
         })
        // document.addEventListener('click',function(e){
            // e.stopPropagation();
            //     console.log('document')
        // })

        // window.addEventListener('click',function(e){
            // e.stopPropagation();
            //     console.log('window')
        // })

    // 了解   
    // 一定是dom2级别绑定事件  
    // addEventListener('事件类型','事件处理函数',false);
    // false 默认是冒泡 由下往上走 
    // true  捕获 
    // document.querySelector('.inner').addEventListener('click', function () { console.log('inner') }, true)
    // document.querySelector('.center').addEventListener('click', function () { console.log('center') }, true)
    // document.querySelector('.outer').addEventListener('click', function () { console.log('outer') }, true)
    // document.body.addEventListener('click', function () { console.log('body') }, true)
    // document.documentElement.addEventListener('click', function () { console.log('html') }, true)
    // document.addEventListener('click', function () { console.log('document') }, true)
    // window.addEventListener('click', function () { console.log('window') }, true)
        

    // 浏览器的机制决定的 一个元素可以接受 两次或者多次的事件行为 
    // 只需要触发一次
     </script>
</body>
</html>